<!--
 * @Author: yanzengyong 709402944@qq.com
 * @Date: 2025-08-16 09:56:16
 * @LastEditors: yanzengyong 709402944@qq.com
 * @LastEditTime: 2025-08-21 21:35:42
 * @FilePath: /cyj-boot-parent/cyj-boot-web/src/views/demo/pure/MultipleFormInpExample/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div :class="[showFooter ? `${prefixCls}` : `${prefixCls}-out`]">
    <div :class="[showFooter ? `${prefixCls}-content` : `${prefixCls}-content-nopadding`]">
      <div class="form-content-title">基本信息</div>
      <ExpForm :formDisable="formDisable" ref="expFormRef" />

      <!-- 子表单区域 -->
      <div class="form-content-title">元素列表</div>
      <ExpTabe ref="expTableRef" />
    </div>
    <div v-if="showFooter" :class="[`${prefixCls}-footer`]">
      <a-button preIcon="ant-design:sync-outlined" @click="onReset">重置</a-button>
      <a-button type="primary" preIcon="ant-design:save-filled" @click="onSubmit">保存</a-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, defineProps, defineExpose } from 'vue';
  import { useDesign } from '/@/hooks/web/useDesign';
  import ExpForm from './expForm.vue';
  import ExpTabe from './expTabe.vue';
  const { prefixCls } = useDesign('form-example');
  const expFormRef = ref();
  const expTableRef = ref();

  defineProps({
    showFooter: {
      type: Boolean,
      default: true,
    },
    formDisable: {
      type: Boolean,
      default: false,
    },
  });

  // 重置表单
  async function onReset() {
    expFormRef.value.handleReset();
    expTableRef.value.onReset();
  }
  const onSubmit = async () => {
    await Promise.all([expFormRef.value.validateForm(), expTableRef.value.validateAll()]);
    const params = {
      ...expFormRef.value.getFormData(),
      elementList: expTableRef.value.tableData,
    };
    console.log(params);
  };

  const getSubmitParams = async () => {
    await Promise.all([expFormRef.value.validateForm(), expTableRef.value.validateAll()]);
    return {
      ...expFormRef.value.getFormData(),
      elementList: expTableRef.value.tableData,
    };
  };

  // 暴露给父组件的属性和方法
  defineExpose({
    // 重置
    onReset,
    // 暴露表格数据
    getSubmitParams,
    setFieldsValue: (record) => {
      for (let key in record) {
        console.log('record[key]----', record[key]);
        expFormRef.value.formState[key] = record[key];
      }
    },
  });
</script>

<style lang="less" scoped>
  @import '/@/design/reference/form.less';
  @prefix-cls: ~'@{namespace}-form-example';
  @prefix-cls-out: ~'@{namespace}-form-example-out';
  .@{prefix-cls} {
    border-radius: 8px;
    background: @component-background;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    justify-content: space-between;
    overflow: hidden;
    box-sizing: border-box;
    .@{prefix-cls}-content {
      flex: 1;
      overflow: auto;
      padding: 16px;
      box-sizing: border-box;
    }
    .@{prefix-cls}-content-nopadding {
      flex: 1;
      overflow: auto;
    }
    .@{prefix-cls}-footer {
      text-align: right;
      border-top: 1px solid @border-color-base;
      padding: 14px 20px;
      box-sizing: border-box;
      box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1);
      > .ant-btn {
        margin-left: 10px;
      }
    }
  }
</style>
